<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="http://localhost:8080/login.html">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">信息管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="http://localhost:8080/stu_list.html">生产任务单列表</a></dd>
                    </dl>
                </li>

            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <table id="demo" lay-filter="test"></table>

            <!--     对于表格下面的布局3：9      -->
            <div class="layui-row">
                <div class="layui-col-lg3">
                    <div class="grid-demo grid-demo-bg1">
                        <div>
                            <button type="button" class="layui-btn" lay-submit lay-filter="addForm">添加</button>
                        </div>
                    </div>
                </div>
                <div class="layui-col-lg9">
                    <div class="grid-demo">
                        <!--      查询布局放着这里                  -->
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">订单编号：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="orderNo" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">订单名称：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ordername" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">订单类型：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="ordertype" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">订单状态：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="orderstatus" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <!--     搜索、刷新   -->
                                        <button type="button" class="layui-btn layui-icon" lay-submit
                                                lay-filter="SearchForm">&#xe615;
                                        </button>
                                        <button type="button" id="Refresh" class="layui-btn layui-icon">&#xe669;
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="layui/layui.js"></script>
<script>
    layui.use(['element', 'table', 'jquery', 'layer', 'form'], function () {
        var element = layui.element;
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var addIndex; //定义添加订单的索引值
        var UpdateIndex;  //定义更新订单索引

        table.render({  //进入该界面就开始渲染界面，接收后台的数据
            elem: '#demo'
            , height: 400
            , url: '/list' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                , {field: 'orderNo', title: '订单编号'}
                , {field: 'ordername', title: '订单名称', sort: true}
                , {field: 'ordertype', title: '订单类型'}
                , {field: 'orderstatus', title: '订单状态'}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ]],
            done: function (res, curr, count) { //表格数据格式测试
                console.log(res.data);
            }
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'detail') { //查看
                console.log(data.account);
                layer.open({
                    type: 1,
                    area: '800px',
                    shade: 0,
                    content: $('#selectLayer'),
                    success: function (layero, index) { //层弹出后的成功回调方法
                        console.log("success");
                        $("input[name = 'orderNo']").val(data.orderNo);  //将table中数据放到layer弹出层里
                        $("input[name = 'ordername']").val(data.ordername);
                        $("input[name = 'ordertype']").val(data.ordertype);
                        $("input[name = 'orderstatus']").val(data.orderstatus);
                    }
                });

            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    var location = '/delete?id=' + data.id;

                    $.ajax({
                        url: location,
                        type: 'GET',
                        success: function () {
                            layer.msg("删除成功");
                            //页面渲染
                            table.render({
                                elem: '#demo'
                                , height: 400
                                , url: '/list' //数据接口
                                , page: true //开启分页
                                , cols: [[ //表头
                                    {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                                    , {field: 'orderNo', title: '订单编号'}
                                    , {field: 'ordername', title: '订单名称', sort: true}
                                    , {field: 'ordertype', title: '订单类型'}
                                    , {field: 'orderstatus', title: '订单状态'}
                                    , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
                                ]]
                            });
                        },
                        error: function () {
                            console.log("进入error");
                        }
                    });

                });
            } else if (layEvent === 'edit') { //编辑
                layer.open({
                    type: 1,
                    area: '800px', //area: ['500px', '300px'],
                    shade: 0,
                    content: $('#EditLayer'),
                    success: function (layero, index) { //层弹出后的成功回调方法
                        console.log("success");
                        $("input[name = 'id']").val(data.id);
                        $("input[name = 'orderNo']").val(data.orderNo);  //将table中数据放到layer弹出层里
                        $("input[name = 'ordername']").val(data.ordername);
                        $("input[name = 'ordertype']").val(data.ordertype);
                        $("input[name = 'orderstatus']").val(data.orderstatus);
                        UpdateIndex = index;
                    }
                });
                //监听更新按钮
                form.on('submit(update)', function (data) {
                    //向服务器发送请求
                    $.ajax({
                        type: 'POST',
                        url: '/update',
                        contentType: "application/json", //向后台发送数据的格式必须为json字符串（作为请求头告诉服务端消息主体是序列化的JSON字符串。除低版本的IE，基本都支持。）
                        data: JSON.stringify(data.field), // 更新时data.field.id的值未在表单上，多以一直为0，导致无法更新。
                        success: function (result) {
                            console.log(result);
                            if (result == 'ok') { //确实能够接收数据
                                console.log(result);
                                layer.msg("更新成功");
                                layer.close(UpdateIndex); //关闭弹窗找到索引
                                obj.update({  //同步更新缓存对应的值，也就是更新页面的那行数据
                                    id: data.field.id,
                                    orderNo: data.field.orderNo,
                                    ordername: data.field.ordername,
                                    ordertype: data.field.ordertype,
                                    orderstatus: data.field.orderstatus
                                });
                            }
                        },
                        error: function (result) {
                            layer.msg("更新失败");
                            console.log(result);
                            layer.close(UpdateIndex);
                        }
                    });
                    return false;
                });
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

        //监听form表单-打开弹出层
        form.on('submit(addForm)', function (data) {
            console.log("addForm");
            layer.open({
                type: 1,
                title: '订单添加',
                area: '800px', //area: ['500px', '300px'],
                shade: 0,
                content: $('#addLayer'),
                success: function (layero, index) {
                    addIndex = index;
                }
            });
            return false;
        });

        //监听真正意义上的添加
        form.on('submit(add)', function (data) {
            //向服务器发送请求
            $.ajax({
                type: 'POST',
                url: '/add',
                contentType: "application/json", //向后台发送数据的格式必须为json字符串（作为请求头告诉服务端消息主体是序列化的JSON字符串。除低版本的IE，基本都支持。）
                data: JSON.stringify(data.field), // 对象转换为 JSON 字符串
                success: function (result) {
                    console.log(result);
                    if (result == 'ok') { //确实能够接收数据
                        console.log(result);
                        layer.msg("添加成功");
                        layer.close(addIndex); //关闭弹窗找到索引

                        table.render({  //渲染
                            elem: '#demo'
                            , height: 400
                            , url: '/list' //数据接口
                            , page: true //开启分页
                            , cols: [[ //表头
                                {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                                , {field: 'orderNo', title: '订单编号'}
                                , {field: 'ordername', title: '订单名称', sort: true}
                                , {field: 'ordertype', title: '订单类型'}
                                , {field: 'orderstatus', title: '订单状态'}
                                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
                            ]]
                        });
                    }
                },
                error: function (result) {
                    layer.msg("添加失败");
                    console.log(result);
                    layer.close(addIndex); //关闭弹窗找到索引
                }
            });
            return false;
        });

        //为搜寻添加点击事件
        form.on('submit(SearchForm)', function (data) {
            //向服务器发送请求
            $.ajax({ //成功发送请求，数据返回正常
                type: 'POST',
                url: '/search',
                contentType: "application/json", //向后台发送数据的格式必须为json字符串（作为请求头告诉服务端消息主体是序列化的JSON字符串。除低版本的IE，基本都支持。）
                data: JSON.stringify(data.field), // 对象转换为 JSON 字符串
                success: function (result) {
                    console.log(result.data);  //带回来的数据
                    dataTable(result.data);
                },
                error: function (result) {
                    layer.msg("查询失败");
                    console.log(result);
                }
            });
            return false;
        });

        function dataTable(orderData) {
            table.render({  //渲染方式异常
                elem: '#demo'
                , height: 400
                , data: orderData    //直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field: 'orderNo', title: '订单编号'}
                    , {field: 'ordername', title: '订单名称', sort: true}
                    , {field: 'ordertype', title: '订单类型'}
                    , {field: 'orderstatus', title: '订单状态'}
                    , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
                ]]
            });
        }

        //为按钮添加点击事件
        $('#Refresh').click(function () {
            console.log("刷新按钮被点击");
            //重新渲染数据
            table.render({  //渲染
                elem: '#demo'
                , height: 400
                , url: '/list' //数据接口
                , page: true //开启分页
                , cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                    , {field: 'orderNo', title: '订单编号'}
                    , {field: 'ordername', title: '订单名称', sort: true}
                    , {field: 'ordertype', title: '订单类型'}
                    , {field: 'orderstatus', title: '订单状态'}
                    , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
                ]]
            });
        });
    });


</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
<!--订单信息查看-->
<form class="layui-form" action="" id="selectLayer" style="display: none">
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="orderNo" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">订单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="ordername" class="layui-input" disabled>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">订单类型</label>
                <div class="layui-input-block">
                    <input type="text" name="ordertype" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-block">
                    <input type="text" name="orderstatus" class="layui-input" disabled>
                </div>
            </div>
        </div>
    </div>
</form>

<!--订单信息添加-->
<form class="layui-form" action="" id="addLayer" style="display: none">
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="orderNo" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">订单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="ordername" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">订单类型</label>
                <div class="layui-input-block">
                    <input type="text" name="ordertype" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-block">
                    <input type="text" name="orderstatus" class="layui-input">
                </div>
            </div>
            <!--  提交按钮 -->
            <div class="layui-form-item">
                <button type="button" class="layui-btn" lay-submit lay-filter="add">添加</button>
            </div>
        </div>
    </div>
</form>


<!--订单信息更新-->
<form class="layui-form" action="" id="EditLayer" style="display: none">
    <!--  将id属性的值放到一个无法看到的属性框中，但是要有位置，不然数据data.field.id返回的值一直为0  -->
    <input type="hidden" name="id" class="layui-input"/>
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="orderNo" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">订单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="ordername" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <label class="layui-form-label">订单类型</label>
                <div class="layui-input-block">
                    <input type="text" name="ordertype" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">订单状态</label>
                <div class="layui-input-block">
                    <input type="text" name="orderstatus" class="layui-input">
                </div>
            </div>
            <!--  提交按钮 -->
            <div class="layui-form-item">
                <button type="button" class="layui-btn" lay-submit lay-filter="update">更新</button>
            </div>
        </div>
    </div>
</form>
</html>